<template>
  <div class="bank-cards">
    <h2>银行卡管理</h2>
    <p>我的银行卡号: {{ myPrimaryCard }}</p>
    <ul>
      <li v-for="(card, index) in cards" :key="index">{{ card }}</li>
    </ul>
    <form @submit.prevent="addCard">
      <label for="newCard">添加银行卡:</label>
      <input id="newCard" v-model="newCardNumber" type="text" required />
      <button type="submit">添加</button>
    </form>
    <form @submit.prevent="removeCard">
      <label for="removeCard">删除银行卡:</label>
      <input id="removeCard" v-model="cardToRemove" type="text" required />
      <button type="submit">删除</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'BankCards',
  data() {
    return {
      cards: ['1234567890122'], // 初始卡号列表
      newCardNumber: '',
      cardToRemove: '',
    };
  },
  computed: {
    // 获取我的主银行卡号
    myPrimaryCard() {
      return this.cards.length > 0 ? this.cards[0] : '1234567890122';
    }
  },
  methods: {
    addCard() {
      // 在这里添加添加银行卡的逻辑（例如：验证、发送请求到服务器等）
      this.cards.push(this.newCardNumber);
      this.newCardNumber = '';
    },
    removeCard() {
      // 在这里添加删除银行卡的逻辑（例如：验证、发送请求到服务器等）
      const index = this.cards.indexOf(this.cardToRemove);
      if (index > -1) {
        this.cards.splice(index, 1);
      }
      this.cardToRemove = '';
    },
  },
};
</script>

<style scoped>
.bank-cards ul {
  list-style-type: none;
  padding: 0;
}
.bank-cards li {
  padding: 5px 0;
  border-bottom: 1px solid #ccc;
}
.bank-cards form {
  margin-top: 10px;
}
</style>